<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型训练</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>模型评估</span>
            </div>
            <div class="todo">
                <img src="../../../../../assets/images/todo.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context">
            <div class="title">模型评估&nbsp;&nbsp;&nbsp;&nbsp;<span *ngIf="step==1"><img src="../../../../../assets/images/download.png" />下载评估结果</span></div>
            <div class="tab-main" *ngIf="step==0">
                <div class="tips-img"><img src="../../../../../assets/images/proc.png"></div>
                <div class="tips">模型评估中，请等待...</div>                            
            </div>
            <div class="tab-main" *ngIf="step==1">
                <div class="items"><div><span>版本:</span><span>V2</span></div><div><span>训练集数量:</span><span>12</span></div><div><span>测试集数量:</span><span>120</span></div><div class="w300"><span>创建时间:</span><span>2021/03/12 10:17:11 GMT+08:00</span></div></div>
                <div class="maincontext">
                    <div class="maincontext_left">
                        <div class="barSelect">
                            <nz-select nzShowSearch nzAllowClear  nzPlaceHolder="添加对比版本" [(ngModel)]="selectedVersion">
                                <nz-option nzLabel="V1" nzValue="V1"></nz-option>
                                <nz-option nzLabel="V2" nzValue="V2"></nz-option>
                                <nz-option nzLabel="V3" nzValue="V3"></nz-option>
                            </nz-select>
                        </div>
                        <div echarts [options]="barChart" style="height: 100%;width:100%;"></div>
                    </div>
                    <div class="maincontext_right">
                        <div class="right-title">
                            <div class="right-title-left">模型准确率</div>
                            <div class="right-title-right" (click)="showDetail()">查看评估详情</div>
                        </div>
                        <div class="right-tips">OCR识别准确率<span>95%</span>较上次<span>&#8593;&nbsp;5%</span>字段识别准确率<span>95%</span>较上次<span>&#8593;&nbsp;3%</span></div>
                        <div>
                            <nz-table
                                #rowSelectionTable
                                nzShowPagination
                                nzShowSizeChanger
                                [nzData]="listOfData"
                                [nzNoResult]="empTemplate"
                            >
                            <thead>
                                <tr>              
                                    <th style="width: 25%;">key</th>
                                    <th style="width: 25%;">OCR识别准确率</th>
                                    <th style="width: 25%;">字段识别准确率</th>
                                    <th style="width: 25%;">字段识别率增长</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let data of rowSelectionTable.data">
                                    <td>{{ data.field1 }}</td>
                                    <td>{{ data.field2 }}</td>
                                    <td>{{ data.field3 }}</td>
                                    <td>{{ data.field4 }}</td>
                                </tr>
                            </tbody>
                            </nz-table>
                            <ng-template #empTemplate><img style="padding-top: 80px;" src="../../../../../assets/images/epy.png"><div class="epy">暂无数据，请先<span>新建训练数据集</span></div></ng-template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title martb10" *ngIf="step==1">效果提升建议</div>
            <div class="suggests" *ngIf="step==1">
                <div class="suggest">
                    <div class="suggest-title">增加训练集</div>
                    <div class="suggest-ctx">增加训练数据以提升模型识别精度。当KV字段识别率/OCR识别率>80%，KV模板可进行有效识别。</div>
                    <div class="suggest-btns"><button nz-button nzType="defalut">去添加</button><button nz-button nzType="defalut">了解更多</button></div>
                </div>
                <div class="suggest">
                    <div class="suggest-title">检查模板配置</div>
                    <div class="suggest-ctx">检查标注模板的标注是否正确，如果标注错误会影响模型识别准确率。</div>
                    <div class="suggest-btns"><button nz-button nzType="defalut">了解更多</button></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <button nz-button nzType="defalut" class="prebutton">上一步</button>
        <button nz-button nzType="defalut" class="nextbutton">下一步</button>
    </div>
</div>